<template>
  <Modal v-model="modal"  :width="800" title="特征码标签">
    <div class="content scroll-500">
      <List  item-layout="vertical">
          <ListItem v-for="(item, index) in list" :key="index">
            {{item.name}}
            <CheckboxGroup v-model="item.te_code" @on-change="onText">
              <Checkbox class="mt" v-for="(todo, index1) of item.child" :key="index1" :label="todo.value.id" border>{{todo.value.name}}</Checkbox>
            </CheckboxGroup>
          </ListItem>
      </List>
    </div>
    <div slot="footer">
      <Button class="mr" size="large" type="text" @click="closeModal">关闭</Button>
      <Button class="mr" size="large" type="primary" @click="closeModal">确定</Button>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
  </Modal>
</template>
<script>
import PictureEditItem from "@/components/PictureEditItem"
import { mapGetters } from 'vuex'
export default {
  components: {
    PictureEditItem
  },
  data() {
    return {
      modal: false,
      disabled: false,
      storeContractId: null,
      form: {
         content: []
      },
      order_id: '',
      uploadList: [],
      list: [],
      status: 'pass',
      te_code: [],
      allData: []
    }
  },
  methods: {
    setData(data) {
     this.getData().then(res => {
      this.list.forEach(item => {
        data.forEach(todo => {
          if (item.name == todo.name) {
            item.te_code = todo.te_code
          }
        })
      })
      this.$emit('complete', this.setList)
     })
     
    },
    getData() {
      this.status = 'loading'
      return new Promise((resolve)=> {
         this.$ajaxGet(`/system/teCode`).then(data => {
         this.status = 'pass'
         for (let key in data) {
           let item  = {
             name: key,
             te_code: [],
             child: data[key].map(todo => {
               return {
                 value: todo
               }
             })
           }
           data[key].forEach(item => {
            this.allData[item.id] = item.name
           })
           this.list.push(item)
         }
          resolve(this.list)
         return this.list
       })
      })
    },
    openModal(item) {
      this.modal = true;
      if (!this.list.length) this.getData(item)
    },
    uploadPic(value) {
      this.form.imgPath = value.length > 0 ? value.map(item => item.url) : value[0].url;
    },
    closeModal() {
      this.modal = false
    },
    onText() {
      // console.log(this.list)
      this.$emit('complete', this.setList)
    },
    onSave() {
        let param = {
          order_id: this.order_id,
          content: this.form.content
        }
        this.$jsonPost(`/order/addDiscuss`, param).then(data => {
          this.closeModal()
          this.$Notice.success({
            title: '操作成功'
          })
          this.this.form.content = ''
          this.$emit("complete")
        }).catch(() => {
          this.closeModal()
        })
    }
  },
  computed: {
    setList() {
      // console.log(this.allData)
      return this.list.map(item => {
        let addName = ''
        item.te_code.forEach(todo => {
          addName = addName +  this.allData[todo] + ","
        })
        return {
          te_code: item.te_code,
          name: item.name,
          allname: addName
        }
      })
    }
  }
}
</script>
